<template>
    <div>
        <el-card class="box-card"
            style="margin-top: 26px; margin-left: 14px;width: 98% ;vertical-align: middle;height:600px;">
            <div style="margin-left:14px;width: 98%;margin-bottom: 20px;">
                <el-row>
                    <el-button @click="add()" style="margin-left: 16px;">新增</el-button>
                    <el-button @click="edit()" style="margin-left: 16px;">编辑</el-button>
                    <el-button @click="del()">删除</el-button>
                    <el-button @click="status(0)">启动</el-button>
                    <el-button @click="status(1)">停用</el-button>
                    <el-button style="float: right;margin-right:14px;" type="primary"
                        icon="el-icon-search">搜索</el-button>
                    <el-input style="float: right; width: 200px;margin-right:20px;" v-model="input"
                        placeholder="请输入部门编码或名称"></el-input>
                </el-row>
                <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false">
                    <el-card style="height:100%" class="box-card2">
                        <div style="padding:8px 0px 0px 12px;" slot="header" class="clearfix">
                            <span>{{ pd }}</span>
                        </div>
                        <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
                            <el-form-item label="编码规则">
                                <el-input style="width:90%;" v-model="formLabelAlign[0].executionName"></el-input>
                            </el-form-item>
                            <el-form-item label="执行规则类型" class="fos">
                                <el-row>
                                    <el-button style="margin-left: 1px;" class="zxgzlx"
                                        @click="timeSubmit('小时', 0)">小时</el-button>
                                    <el-button class="zxgzlx" @click="timeSubmit('日', 1)">日</el-button>
                                    <el-button class="zxgzlx" @click="timeSubmit('周', 2)">周</el-button>
                                    <el-button class="zxgzlx" @click="timeSubmit('月', 3)">月</el-button>
                                    <el-button class="zxgzlx" @click="timeSubmit('季', 4)">季</el-button>
                                    <el-button class="zxgzlx" @click="timeSubmit('年', 5)">年</el-button>
                                </el-row>
                            </el-form-item>
                            <el-form-item label="频率间隔">
                                <el-input-number style="width: 90%;" v-model="num" controls-position="right"
                                    @change="handleChange" :min="0" :max="10"></el-input-number>
                                {{ formLabelAlign[0].executionType }}
                            </el-form-item>

                            <el-form-item label="执行规则" prop="resource">
                                <el-radio-group v-model="formLabelAlign[0].executionTime" style="">
                                    <el-radio label="灵活时间" value="1"></el-radio>
                                    <el-radio label="同一时间" value="2"></el-radio>
                                    <el-radio label="时间段" value="3"></el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <div class="box-card"
                                style="width: 80%;height: 0%;margin-left: 80px;padding:0px;align-self: center;">
                                <el-row slot="header" class="clearfix">
                                    <div v-for="(value, index) in fromCode" :value="value" :index="index" :key="value">
                                        <el-button style="float: left;" class="monthbutton"
                                            @click="monthSubmit(value)">{{
                                                value }}
                                            <i class="el-icon-close" @click="mclose(index, value)"></i></el-button>
                                    </div>
                                    <div>
                                        <el-button type="text" @click="dialogTableVisible = true" style="">
                                            <i class="el-icon-circle-plus-outline"></i>
                                        </el-button>
                                    </div>

                                </el-row>


                                <el-dialog title="选择月份" :visible.sync="dialogTableVisible">
                                    <hr>
                                    <el-checkbox-group v-model="checkList">
                                        <el-checkbox value="1月" label="1月"></el-checkbox>
                                        <el-checkbox class="check" value="2月" label="2月"></el-checkbox>
                                        <el-checkbox class="check" value="3月" label="3月"></el-checkbox>
                                        <el-checkbox class="check" value="4月" label="4月"></el-checkbox>
                                        <el-checkbox class="check" value="5月" label="5月"></el-checkbox>
                                        <el-checkbox class="check" value="6月" label="6月"></el-checkbox>
                                        <br>
                                        <el-checkbox value="7月" label="7月"></el-checkbox>
                                        <el-checkbox class="check" value="8月" label="8月"></el-checkbox>
                                        <el-checkbox class="check" value="9月" label="9月"></el-checkbox>
                                        <el-checkbox class="check" value="10月" label="10月"></el-checkbox>
                                        <el-checkbox class="check1" value="11月" label="11月"></el-checkbox>
                                        <el-checkbox style="margin-left: 14px;margin-top: 20px" value="12月"
                                            label="12月"></el-checkbox>
                                    </el-checkbox-group>
                                    <hr style="margin-top: 20px;">
                                    <div style="width:80%; margin:0px 0px 0px 504px;">
                                        <el-button class="monthbutton_2" style="border-color:green;color:green"
                                            @click="removeck()">移除</el-button>
                                        <el-button type="success" class="monthbutton_2"
                                            @click="subcheck()">确认</el-button>

                                    </div>
                                </el-dialog>

                                <div style="width:80%; margin:0px 0px 20px 80px;">
                                    <div style="margin-left:120px">
                                        <el-button type="success" class="monthbutton_1"
                                            @click="dialogFormVisible = true">添加日期</el-button>
                                        <el-button class="monthbutton_1"
                                            style="border-color:green;color:green;margin-left:12px"
                                            @click="rqDel()">移除</el-button>
                                    </div>

                                    <el-dialog title="选择日期" :visible.sync="dialogFormVisible" :modal="true"
                                        :modal-append-to-body="true">
                                        <hr>
                                        <el-checkbox-group v-model="checkMonthList">
                                            <el-checkbox value="1日" label="1日"></el-checkbox>
                                            <el-checkbox style="margin-left: 8px;" value="2日" label="2日"></el-checkbox>
                                            <el-checkbox style="margin-left: 7px;" value="4日" label="4日"></el-checkbox>
                                            <el-checkbox style="margin-left: 7px;" value="5日" label="5日"></el-checkbox>
                                            <el-checkbox style="margin-left: 8px;" value="6日" label="6日"></el-checkbox>
                                            <el-checkbox style="margin-left:8px;" value="7日" label="7日"></el-checkbox>
                                            <el-checkbox style="margin-left: 7px;" value="8日" label="8日"></el-checkbox>
                                            <el-checkbox style="margin-left:3px" value="9日" label="9日"></el-checkbox>
                                            <el-checkbox value="10日" label="10日"></el-checkbox>
                                            <el-checkbox value="11日" label="11日"></el-checkbox>
                                            <el-checkbox value="12日" label="12日"></el-checkbox>
                                            <el-checkbox value="13日" label="13日"></el-checkbox>
                                            <el-checkbox value="14日" label="14日"></el-checkbox>
                                            <el-checkbox value="15日" label="15日"></el-checkbox>
                                            <el-checkbox value="16日" label="16日"></el-checkbox>
                                            <el-checkbox value="17日" label="17日"></el-checkbox>
                                            <el-checkbox value="18日" label="18日"></el-checkbox>
                                            <el-checkbox value="19日" label="19日"></el-checkbox>
                                            <el-checkbox value="20日" label="20日"></el-checkbox>
                                            <el-checkbox value="21日" label="21日"></el-checkbox>
                                            <el-checkbox value="22日" label="22日"></el-checkbox>
                                            <el-checkbox value="23日" label="23日"></el-checkbox>
                                            <el-checkbox value="24日" label="24日"></el-checkbox>
                                            <el-checkbox value="25日" label="25日"></el-checkbox>
                                            <el-checkbox value="26日" label="26日"></el-checkbox>
                                            <el-checkbox value="27日" label="27日"></el-checkbox>
                                            <el-checkbox value="28日" label="28日"></el-checkbox>
                                            <el-checkbox value="29日" label="29日"></el-checkbox>
                                            <el-checkbox v-if="month != '2月'" value="30日" label="30日"></el-checkbox>

                                            <el-checkbox
                                                v-if="month != '4月' && month != '6月' && month != '9月' && month != '11月' && month != '2月'"
                                                value="31日" label="31日"></el-checkbox>

                                        </el-checkbox-group>
                                        <hr style="margin-top: 20px;">
                                        <div style="width:80%; margin:10px 0px 0px 520px;">
                                            <el-button class="monthbutton_2" style="border-color:green;color:green"
                                                @click="removerq()">移除</el-button>
                                            <el-button type="success" class="monthbutton_2"
                                                @click="subcheckrq()">确认</el-button>
                                        </div>

                                    </el-dialog>

                                </div>

                            </div>
                            <div>
                                <el-table id="zxtime" ref="multipleTable1" :header-cell-style="{ textAlign: 'center' }"
                                    size="small" :row-style="{ height: '45px' }"
                                    :cell-style="{ textAlign: 'center', padding: '0px' }" :data="executionTime"
                                    tooltip-effect="dark" style="width: 100%;"
                                    @selection-change="handleSelectionChange1">
                                    <el-table-column type="selection" width="55">
                                    </el-table-column>
                                    <el-table-column prop="id" label="序号"></el-table-column>
                                    <el-table-column prop="dateTime" label="日期"></el-table-column>

                                    <el-table-column prop="startTime" label="开始时间">
                                        <template slot-scope="scope">
                                            <el-time-select style="border: none;" placeholder="起始"
                                                @change="startTimeSubmit(executionTime[scope.$index].startTime, executionTime[scope.$index].dateTime)"
                                                v-model="executionTime[scope.$index].startTime" :picker-options="{
                                                    start: '08:30',
                                                    step: '00:15',
                                                    end: '18:30'
                                                }">
                                            </el-time-select>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="endTime" label="结束时间">
                                        <template slot-scope="scope">
                                            <el-time-select style="border: none;" placeholder="结束"
                                                @change="endTimeSubmit(executionTime[scope.$index].endTime, executionTime[scope.$index].dateTime)"
                                                v-model="executionTime[scope.$index].endTime" :picker-options="{
                                                    start: '08:30',
                                                    step: '00:15',
                                                    end: '18:30',
                                                    minTime: executionTime[scope.$index].startTime
                                                }">
                                            </el-time-select>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作">
                                        <template slot-scope="scope">
                                            <el-button style="color: green;" @click="yc(scope.row)">移除</el-button>
                                        </template>
                                    </el-table-column>

                                </el-table>
                            </div>
                            <el-form-item style="margin-top: 60px;width:90%;" label="规则描述" prop="desc">
                                <el-input type="textarea" v-model="formLabelAlign[0].executionDescribe"></el-input>
                            </el-form-item>

                            <el-form-item>
                                <el-button type="primary" @click="scgzms()">生成规则描述</el-button>
                                <el-button type="primary" @click="onSubmit">立即创建</el-button>
                            </el-form-item>
                        </el-form>
                    </el-card>
                </el-drawer>
            </div>


            <div style=" margin-left:14px;width: 98%;">
                <el-table ref="multipleTable" :data="tableData.records" tooltip-effect="dark" style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column prop="executionId" label="序号">
                    </el-table-column>
                    <el-table-column prop="executionName" label="规则名称">
                    </el-table-column>
                    <el-table-column prop="executionType" label="执行规则类型">
                    </el-table-column>
                    <el-table-column prop="executionFrequency" label="执行频率">
                    </el-table-column>
                    <el-table-column prop="executionInterval" label="执行间隔">
                    </el-table-column>
                    <el-table-column prop="executionState" label="状态">
                    </el-table-column>
                    <el-table-column prop="executionDescribe" label="规则描述">
                    </el-table-column>
                </el-table>
            </div>

            <div class="block">
                <el-pagination style="margin-left: 14px;margin-top:20px;" :total="this.tableData.total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="this.tableData.page" :page-sizes="[2, 4]" :page-size="this.tableData.size"
                    layout="total, sizes, prev, pager, next, jumper">
                </el-pagination>
            </div>
        </el-card>

    </div>

</template>

<script>

import axios from 'axios';
import { froceConfig } from '@/api/set/froce'
export default {

    mounted() {
        this.init();
    },
    methods: {

        //搜索
        search() {
            this.init();
        },
        //页数
        handleSizeChange(val) {
            this.size = val;
            this.init();
        },
        init() {
            axios
                .get('http://localhost:9286/execution/list', { params: { page: this.page, size: this.size, condition: this.ss } })
                .then(res => {
                    console.log(res.data);
                    for (var i = 0; i < res.data.records.length; i++) {
                        if (res.data.records[i].executionType == "0") {
                            res.data.records[i].executionType = "小时"
                        } else if (res.data.records[i].executionType == "1") {
                            res.data.records[i].executionType = "日"
                        } else if (res.data.records[i].executionType == "2") {
                            res.data.records[i].executionType = "周"
                        } else if (res.data.records[i].executionType == "3") {
                            res.data.records[i].executionType = "月"
                        } else if (res.data.records[i].executionType == "4") {
                            res.data.records[i].executionType = "季"
                        } else {
                            res.data.records[i].executionType = "年"
                        }
                        if (res.data.records[i].executionState == "0") {
                            res.data.records[i].executionState = "启动"
                        } else {
                            res.data.records[i].executionState = "禁止"
                        }
                        if (res.data.records[i].executionTime == "1") {
                            res.data.records[i].executionTime = "灵活时间"
                        } else if (res.data.records[i].executionTime == "2") {
                            res.data.records[i].executionTime = "同一时间"
                        } else {
                            res.data.records[i].executionTime = "时间段"
                        }
                    }
                    this.tableData = res.data;
                })
        },
        //当前页
        handleCurrentChange(val) {
            this.page = val;
            this.init();
        },
        //关闭月份
        mclose(index, value) {
            this.fromCode.splice(index, 1);
            for (let i = 0; i < this.executionTimeclose.length; i++) {
                if (value == this.month) {
                    this.executionTime = [];
                }
                this.executionTimeclose = this.executionTimeclose.filter(item => item.exemonth !== value);
            }

        },
        //日期移除
        rqDel() {
            if (this.multipleSelection1.length > 0) {
                for (let i = 0; i < this.multipleSelection1.length; i++) {
                    for (let j = 0; j < this.executionTime.length; j++) {
                        this.executionTime = this.executionTime.filter(item1 => {
                            return item1.dateTime !== this.multipleSelection1[i].dateTime && item1.exemonth === this.multipleSelection1[i].exemonth;
                        });
                    }
                    for (let d = 0; d < this.executionTimeclose.length; d++) {
                        this.executionTimeclose = this.executionTimeclose.filter(item =>
                            item.id !== this.multipleSelection1[i].id
                        );
                    }

                }

            }


        },
        //移除
        yc(val) {
            this.executionTime = this.executionTime.filter(item => item.id !== val.id);
            this.executionTimeclose = this.executionTimeclose.filter(item1 => item1.id !== val.id);
        },
        //切换页面
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        //一件选取
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleSelectionChange1(val) {
            this.multipleSelection1 = val;

            console.log(this.multipleSelection1);
        },
        //编辑
        edit() {
            this.pd = "编辑执行规则";
            this.drawer = true
            if (this.multipleSelection.length == 1) {
                this.formLabelAlign = this.multipleSelection;
                console.log(this.formLabelAlign);
            } else {
                console.log("不是");
            }
        },
        //新增
        add() {
            this.pd = "新建执行规则";
            this.drawer = true
            this.formLabelAlign = [{
                executionType: "年"
            }]
        },
        //计数器
        handleChange(value) {
            this.formLabelAlign[0].executionInterval = value;
        },
        //时间字符串
        timeSubmit(val, num) {
            this.tiemCode = val
            this.formLabelAlign[0].executionType = val;
            console.log(this.formLabelAlign[0].executionType)
        },
        //多选框
        subcheck() {
            this.fromCode = this.checkList;
            console.log(this.fromCode)
            this.dialogTableVisible = false
        },
        //移除全部复选框
        removeck() {
            this.checkList = []
        },
        //移除全部复选框
        removerq() {
            this.checkMonthList = [];
        },
        //多选框日期
        subcheckrq() {
            let nums = 1;
            if (this.month != "") {
                if (this.executionTimeclose.length > 0) {
                    let max = this.executionTimeclose[0].id;
                    for (var i = 1; i < this.executionTimeclose.length; i++) {
                        if (this.executionTimeclose[i].id > max) {
                            nums = this.executionTimeclose[i].id + 1;
                        }
                    }
                }
                for (var i = 0; i < this.checkMonthList.length; i++) {
                    let obj = {
                        id: nums,
                        dateTime: this.checkMonthList[i],
                        startTime: '',
                        endTime: '',
                        exemonth: this.month
                    }
                    ++nums;
                    this.executionTime.push(obj);
                    this.executionTimeclose.push(obj);


                }
            }
            this.dialogFormVisible = false
            this.checkMonthListcc = this.checkMonthList
            this.checkMonthList = [];
        },
        //月份存储日期
        monthSubmit(val) {
            this.month = val
            if (this.smonth == this.month && this.nums == 0) {
                this.executionTime = [];
                this.nums == 1;
                for (var i = 0; i < this.executionTimeclose.length; i++) {
                    if (this.month == this.executionTimeclose[i].exemonth) {
                        this.executionTime.push(this.executionTimeclose[i]);
                    }
                }
            } else if (this.smonth != this.month && this.nums == 1 || this.smonth != this.month && this.nums == 0) {
                this.executionTime = [];
                this.smonth = this.month;
                if (this.nums == 0) {
                    this.nums == 1;
                }
                for (var i = 0; i < this.executionTimeclose.length; i++) {
                    if (this.month == this.executionTimeclose[i].exemonth) {
                        this.executionTime.push(this.executionTimeclose[i]);
                    }
                }
            }

        },
        //起始日期
        startTimeSubmit(val, date) {
            for (var i = 0; i < this.executionTime.length; i++) {
                if (this.executionTime[i].dateTime == date) {
                    this.executionTime[i].startTime = val;
                }
            }

        },
        //结束日期
        endTimeSubmit(val, date) {
            for (var i = 0; i < this.executionTime.length; i++) {
                if (this.executionTime[i].dateTime == date) {
                    this.executionTime[i].endTime = val;
                }
            }
        },
        //生成规则编码
        scgzms() {
            this.formLabelAlign[0].executionDescribe = "每年\n";
            let newextion = [];
            newextion = this.executionTimeclose.filter(item => {
                return item.startTime !== "" && item.endTime !== "";
            });
            let mon = newextion[0].exemonth;
            let n = 1;
            console.log(mon);
            for (var j = 0; j < newextion.length; j++) {
                if (mon != newextion[j].exemonth || (newextion[j].exemonth == newextion[0].exemonth && n == 1)) {
                    mon = newextion[j].exemonth;
                    n = 2
                    this.formLabelAlign[0].executionDescribe += newextion[j].exemonth + "的";
                }
                this.formLabelAlign[0].executionDescribe += newextion[j].dateTime + newextion[j].startTime + "和" + newextion[j].endTime + "之间执行";
                if (j == newextion.length - 1) {
                    this.formLabelAlign[0].executionDescribe += ";";
                } else {
                    this.formLabelAlign[0].executionDescribe += ",";
                }
            }
        },
        //抽屉按钮
        onSubmit() {
            this.formLabelAlign[0].executionInterval = this.num
            if (this.pd == "新建执行规则") {
                froceConfig('add', this.formLabelAlign[0]).then(res => {
                    console.log(res)
                    this.drawer = false
                })
                this.init();
            } else {
                froceConfig('update', this.formLabelAlign[0]).then(res => {
                    console.log(res)
                    this.drawer = false
                })
                this.init();
            }
        },
        //删除
        del() {
            var lists = {}
            lists = this.multipleSelection[0]
            froceConfig('delete', lists).then(res => {
                console.log(res);
                this.init();
            })

        },
        //更改状态
        status(val) {
            var lists = {}
            for (var i = 0; i < this.multipleSelection.length; i++) {
                this.multipleSelection[i].executionState = val;
                lists = this.multipleSelection[i];
                froceConfig('updateState', lists).then(res => {
                    console.log(res);
                    this.init();
                })
            }

        }
    },
    data() {
        return {
            form: {},
            pd: "",
            ss: "",
            page: 1,
            size: 4,
            checkMonthListcc: [],
            checkMonthList: [],
            month: '',
            nums: 0,
            smonth: '1月',
            dialogTableVisible: false,
            dialogFormVisible: false,
            fromCode: [],
            checkList: [],
            tiemCode: '年',
            num: 1,
            executionTimeclose: [],
            formLabelAlign: [{

            }]
            ,
            drawer: false,
            executionTime: [

            ],
            tableData: [],
            multipleSelection: [],
            multipleTable1: [],
            currentPage1: 5,
            currentPage2: 5,
            currentPage3: 5,
            currentPage4: 4
        }
    }
}
</script>
<style>
.zxgzlx {
    width: 15%;
    margin: -10px;
    font-size: 10px;
}

el-form-item {
    font-size: 8px;
}

#zxtime {
    text-align: center
}

.monthbutton {
    padding: 3px
}

.monthbutton_1 {
    padding: 6px
}

.check {
    margin-left: 20px;
    margin-top: 20px
}

.check1 {
    margin-left: 12px;
    margin-top: 20px
}

.el-form-item__label {
    font-size: 10px;
}
</style>